<template>
  <div class="wrapper">
    <ul
        v-for="item in foodList"
        :key="item.id"
    >
      <li>
        <img :src="item.imgUrl">
        <div class="fonts">
          <h3>{{ item.description }}</h3>
          <p>{{item.name}}</p>
          <p>￥{{item.price}}</p>
        </div>
        <div class="icon">
          <el-icon v-if="item.quantity!==0"><Minus @click="minusItem(item)"/></el-icon>
          {{item.quantity ? item.quantity:''}}
          <el-icon><Plus @click="toCart(item)"/></el-icon>
        </div>
      </li>
    </ul>
  </div>
  <div class="bar">
    <div class="left">
      <div class="circle">
        <i class="iconfont icon-gouwuchekong"></i>
      </div>
      <div class="notice" v-if="currentCount">
        <p>{{currentCount}}</p>
      </div>
      <div class="fonts">
        <h2>￥{{totalPrice}}</h2>
        <p>还需要{{ shopInfo.deliveryPrice}}元配送费</p>
      </div>
    </div>
    <div class="right">
      <p @click="toConfirm">去结算</p>
    </div>
  </div>
</template>

<script setup>
import {Plus, Minus} from '@element-plus/icons-vue'
import {computed, ref} from "vue";
// import router from "@/router";
import {defineProps, onBeforeMount} from "vue";
import {getPassFood} from "@/utils/api/FoodManager";
import {addToCart, getCartInfo} from "@/utils/api/cartManager";
import {getShopById} from "@/utils/api/ShopManager";
import {ElMessage} from "element-plus";
import {useRouter} from "vue-router";

const props = defineProps(['shopId'])
// eslint-disable-next-line vue/no-setup-props-destructure
const {shopId} = props
const userId = JSON.parse(localStorage.getItem("userLoginAll")).id

// 获取食物列表, 商家配送费
const foodList = ref([])
const shopInfo = ref({})
onBeforeMount(async ()=>{
  const res = await getPassFood({shopId})
  foodList.value = res.data
  let response = await getCartInfo({userId,shopId})
  const cartInfo = response.data
  // 为item添加quantity
  foodList.value.map(item=>{
    for (let i=0; i<cartInfo.length; i++ ){
      if(cartInfo[i].foodId === item.id ){
        return item.quantity = cartInfo[i].quantity
      }
    }
    // 最后这个很关键，没匹配到的返回0
    return item.quantity = 0
  })
  const res1 =await getShopById({id: shopId})
  shopInfo.value = res1.data
})
// 定义一个对象来接收购物车
// 添加到购物车
const toCart =async (item)=>{
  item.quantity ++
  const cart = ref({shopId, userId, quantity: item.quantity,foodId:item.id})
  await addToCart(cart.value)
}
// 减少货物
const minusItem =async (item)=>{
  item.quantity --
  const cart = ref({shopId, userId, quantity: item.quantity,foodId:item.id})
  if(item.quantity>=0){
    await addToCart(cart.value)
  }
}
const totalPrice = computed(() => {
      let val = 0
      foodList.value.map(item=>{
        val += item.quantity * item.price
      })
      return val
    }
)
const currentCount = computed(()=>{
  let val = 0
  foodList.value.map(item=>{
    val += item.quantity
  })
  return val
})

const router = useRouter()
function toConfirm() {
  if(totalPrice.value < shopInfo.value.startPrice){
    ElMessage({
      message: `不够起送费,${shopInfo.value.startPrice}元`,
      type: 'warning',
    })
  }
  else{
    router.push("/order-confirm/" + shopId)
  }
}
</script>

<style scoped>
.wrapper {
  /*background-color: #70BC46;*/
  position: relative;
  top: 4rem;
}
.wrapper img {
  height: 5rem;
  width: 6rem;
  padding: 0.8rem;
}
.wrapper ul {
  list-style: none;
  padding-inline-start: 0;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  padding-bottom: 80px;
}
.wrapper ul li{
  display: flex;
  /*justify-content: space-around;*/
  align-items: center;
}
.wrapper .fonts h3 {
  margin: 0 0 18px;
  top:0.8rem;
}
.wrapper .fonts p {
  margin: 0 0;
  font-size: 5px;
}
.wrapper .icon {
  position: absolute;
  right: 0.8rem;
}
.bar {
  position: fixed;
  left: 0;
  bottom: 0;
  height: 4rem;
  width: 100vw;
  /*background-color: #70BC46;*/
  z-index: 100;
  display: flex;

}
.bar .left {
  background-color: #505052;
  height: 100%;
  width: 60%;
  display: flex;
}
.bar .left .notice {
  border-radius: 50%;
  background-color: red;
  height: 1.5rem;
  width: 1.5rem;
  z-index: 101;
  margin: -1.5rem 0 0 -1.5rem;
  text-align: center;
  vertical-align: center;
}
.bar .left .notice p {
  color: white;
  margin: 0;
}
.bar .right {
  height: 100%;
  background-color: #35c973;
  width: 40%;
}
.circle {
  background-color: deepskyblue;
  border-radius: 50%;
  height: 4rem;
  width: 4rem;
  border: solid 0.5em #3f484a;
  text-align: center;
  position: relative;
  margin-top: -2rem;
  margin-left: 2rem;
}
.circle i {
  font-size: 30px;
  color: white;
  position: absolute;
  right: 1rem;
  top:0.9rem
}
.bar .right p {
  text-align: center;
  color: white;
  vertical-align: middle;
  font-size: 20px;
}
.bar .fonts {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  color: white;
}
.bar .fonts h2 {
  margin: 0;
}
</style>